<template>
    <div class="avatar">
        <el-avatar shape="square" :size="200"  :src="userInfo.headimgurl"/>
    </div>
    <el-descriptions class="margin-top" title="我的中心" :column="2"  border>
        <template #extra>
            <el-button type="primary">操作</el-button>
        </template>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">unid</div>
            </template>
            {{userInfo.unid}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">账号</div>
            </template>
           {{userInfo.roleid}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">vip等级</div>
            </template>
            {{userInfo.vipLevel}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">vip到期时间</div>
            </template>
            <span class="el-tag el-tag--danger el-tag--dark">
                {{userInfo.vipExpires}}
            </span>
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">昵称</div>
            </template>
            <span class="el-tag el-tag--success el-tag--dark">
                {{userInfo.nickname}}
            </span>
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">手机号</div>
            </template>
            {{userInfo.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">角色名称</div>
            </template>
            {{userInfo.roleName}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">性别</div>
            </template>
            <span class="el-tag el-tag--small el-tag--light">
                {{userInfo.sex}}
            </span>
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">省份</div>
            </template>
            {{userInfo.province}}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">城市</div>
            </template>
            {{userInfo.city}}
        </el-descriptions-item>
    </el-descriptions>
</template>
<script setup >
    import { computed, ref} from 'vue'
    //引入users的pinia
    import {storeToRefs} from "pinia"
    //引入store中的users.js，获取用户信息
    import {useUser} from "../../../store/users"
    import {
        Iphone,
        Location,
        OfficeBuilding,
        Tickets,
        User,
    } from '@element-plus/icons-vue'
    // 引入路由
    import { useRoute } from "vue-router"
    let route = useRoute()
    //使用store
    let userStore =useUser()
    // 解构store,从pinia中获取用户信息，展示
    let {userInfo} = storeToRefs(userStore)
    console.log(userInfo);
    console.log(userInfo.value);
    console.log(userInfo.value.nickname);

    let {sId} = route.query
    console.log(sId);

</script>
  
<style scoped>
.avatar{
    display: flex;
    justify-content: center;
}
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
.el-tag--dark.el-tag--danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
}
.el-tag--dark.el-tag--success {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
}
.el-tag--small {
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
}
.el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: #409eff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}
</style>
  
<script>
export default {
    meta: {
        title: 'wdzx',
        name: '我的中心',
        routeName: "mine",
        icon: "#icon-wode",
    }
}
</script>
